/* Base animations */
.animate-element {
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease;
}

.animate-element.active {
    opacity: 1;
    transform: translateY(0);
}

/* Text animations */
.animate-text {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 1s ease;
}

.animate-text.active {
    opacity: 1;
    transform: translateX(0);
}

/* Image animations */
.animate-image {
    opacity: 0;
    transform: scale(0.9);
    transition: all 1s ease;
}

.animate-image.active {
    opacity: 1;
    transform: scale(1);
}

/* Button animations */
.animate-button {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    transition: all 1s ease;
}

.animate-button.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Card/container animations */
.animate-card {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: all 1s ease;
}

.animate-card.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Section animations */
.animate-section {
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease;
}

.animate-section.active {
    opacity: 1;
    transform: translateY(0);
}

/* Form input animations */
.animate-input {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.8s ease;
}

.animate-input.active {
    opacity: 1;
    transform: translateY(0);
}

/* Icon animations */
.animate-icon {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s ease;
}

.animate-icon.active {
    opacity: 1;
    transform: scale(1);
}

/* List item animations */
.animate-list-item {
    opacity: 0;
    transform: translateX(-15px);
    transition: all 0.8s ease;
}

.animate-list-item.active {
    opacity: 1;
    transform: translateX(0);
}

/* Product card animations */
.animate-product-card {
    opacity: 0;
    transform: translateY(15px) scale(0.95);
    transition: all 1s ease;
}

.animate-product-card.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Price animations */
.animate-price {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.8s ease;
}

.animate-price.active {
    opacity: 1;
    transform: translateY(0);
}

/* Badge animations */
.animate-badge {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.6s ease;
}

.animate-badge.active {
    opacity: 1;
    transform: scale(1);
}

.hover-scale:hover{
    transform: scale(1.1);
}